<template>
    <z-paging>
        <view class="heqader_box">
            <hedsty :headCentext="'添加地址'"></hedsty>
        </view>
        <view class="top_box" style="background-image: url('https://morgan.dingxians.cn/static/address/4.png');">
            <view class="dange_box">
                <view class="left_text_box">
                    收货人
                </view>
                <view class="right_input_box">
                    <view class="input_box">
                        <u--input placeholder="请填写" color="#FFFFFF" inputAlign="right" :value="Nmaevalue"
                            v-model="Nmaevalue" @change="namechange"></u--input>
                    </view>
                    <view class="right_icon_boxs">
                        <u-icon name="arrow-right" color="#FFFFFF" size="20"></u-icon>
                    </view>
                </view>
            </view>
            <view class="dange_box">
                <view class="left_text_box">
                    手机号码
                </view>
                <view class="right_input_box">
                    <view class="input_box">
                        <u--input placeholder="请填写" color="#FFFFFF" inputAlign="right" :value="callvalue"
                            v-model="callvalue" @change="callchange"></u--input>
                    </view>
                    <view class="right_icon_boxs">
                        <u-icon name="arrow-right" color="#FFFFFF" size="20"></u-icon>
                    </view>
                </view>
            </view>
            <view class="dange_box">
                <view class="left_text_box">
                    所在地区
                </view>
                <view class="right_input_box">
                    <view class="input_box" style="line-height: 100rpx; color: #fff;" @click="openAddress">
                        {{ pickerText || '请选择' }}
                    </view>
                    <view class="right_icon_boxs">
                        <u-icon name="arrow-right" color="#FFFFFF" size="20"></u-icon>
                    </view>
                </view>
            </view>
            <view class="dange_box">
                <view class="left_text_box">
                    详细地址
                </view>
                <view class="right_input_box">
                    <view class="input_box">
                        <u--input placeholder="请填写" color="#FFFFFF" inputAlign="right" :value="detailedvalue"
                            v-model="detailedvalue" @change="detailedchange"></u--input>
                    </view>
                    <view class="right_icon_boxs">
                        <u-icon name="arrow-right" color="#FFFFFF" size="20"></u-icon>
                    </view>
                </view>
            </view>
            <view class="dange_box">
                <view class="left_text_box">
                    设置默认地址
                </view>
                <view class="right_input_box">
                    <view class="switch_box">
                        <u-switch inactiveColor="rgba(128, 128, 128, 1)" activeColor="rgba(255, 238, 31, 1)"
                            v-model="switchvalue" @change="switchchange"></u-switch>
                    </view>
                </view>
            </view>
        </view>

        <view class="queren_box" style="background-image: url('https://morgan.dingxians.cn/static/editpic/4.png');" @click="submit">
            确认添加
        </view>
        <liu-customize-sel ref="scroll" @change='chooseSuccess'></liu-customize-sel>
    </z-paging>
</template>
<script>
import hedsty from '../../components/hedsty.vue'
export default {
    components: {
        hedsty
    },
    data() {
        return {
            Nmaevalue: '',//名字
            callvalue: '',//手机号
            pickerText: '',//地址
            detailedvalue: '',//详细地址
            switchvalue: false,//是否默认
        }
    },
    onLoad() {

    },
    onShow() {

    },
    methods: {
        //打开地址选择器
        openAddress() {
            this.$refs.scroll.open()
        },
        //地址选择成功
        chooseSuccess(e) {
            console.log('所选择的地址信息:', e)
            this.pickerText = e.value[0].label + '-' + e.value[1].label + '-' + e.value[2].label
        },
        namechange(e) {
            this.Nmaevalue = e
            console.log(e)
        },
        callchange(e) {
            this.callvalue = e
            console.log(e)
        },
        detailedchange(e) {
            this.detailedvalue = e
            console.log(e)
        },
        switchchange(e) {
            this.switchvalue = e
            console.log(e)
        },
        submit() {
				let ssq = this.pickerText.split('-')
				let data = {
					username: this.Nmaevalue,
					mobile: this.callvalue,
					detail: this.detailedvalue,
					province: ssq[0],
					city: ssq[1],
					area: ssq[2],
					status: this.switchvalue

				}
				this.$Request.post(this.$api.user.userAddress, data).then(res => {
					if (res.code == 200) {
						this.$msg('保存成功')
						setTimeout(() => {
							this.$goBack()
						}, 500)
					}
				})
			}
    }
}
</script>
<style lang="scss" scoped>
.heqader_box {
    width: 750rpx;
    height: 447rpx;


}

.top_box {
    width: 690rpx;
    height: 556rpx;
    background-size: 100% 100%;
    margin: auto;
    margin-top: -210rpx;
    box-sizing: border-box;
    padding: 30rpx;
    margin-bottom: 113rpx;


    .dange_box {
        width: 100%;
        height: 100rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left_text_box {
            width: 200rpx;
            height: 100rpx;
            line-height: 100rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #FFFFFF;
        }

        .right_input_box {
            width: 400rpx;
            height: 100rpx;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .input_box {
                // width: 200rpx;
                height: 100rpx;
                display: flex;
            }

            .switch_box {
                width: 90rpx;
                height: 40rpx;
            }
        }
    }
}

.queren_box {
    width: 529rpx;
    height: 120rpx;
    margin: auto;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 36rpx;
    color: #FFFFFF;
    line-height: 120rpx;
    text-align: center;
    background-size: 100% 100%;
}
</style>